<template>
  <view class="container">
    <view class="auth-header">
      <view class="auth-logo">
        <u-avatar size="100" mp-avatar font-size="100" />
      </view>

      <authBtn v-if="activeName === 'btn'" />
      <smsCode v-if="activeName === 'code'" />
      <userPassword v-if="activeName === 'user'" @forgetPassword="forgetPassword" />
    </view>

    <view class="auth-footer">
      <u-divider text="其他登陆方式" />
      <view class="menu">
        <u-grid :border="true" col="2">
          <u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" :data-i="index" @click="handleJump">
            <view class="iconfont" :class="baseListItem.name" :style="{'--color':baseListItem.bgColor}" />
            <text class="grid-text">{{ baseListItem.title }}</text>
          </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
      </view>
    </view>
  </view>
</template>

<script>
import authBtn from './authBtn'
import smsCode from './smsCode'
import userPassword from './userPassword'

export default {
  components: {
    authBtn,
    smsCode,
    userPassword
  },
  data() {
    return {
      readFlag: false,
      activeName: '',
      baseList: [],
      enums: {
        menu: [{
          id: 1,
          name: '.icon-login-wechat',
          title: '微信登陆',
          bgColor: '#04be02',
          redirect: '/pages/users/login/authBtn'
        }, {
          id: 2,
          name: '.icon-unlock',
          title: '账号登陆',
          bgColor: '#f0b147',
          redirect: '/pages/users/login/userPassword'
        }, {
          id: 3,
          name: '.icon-shoujisel',
          title: '手机验证',
          bgColor: '#f0b147',
          redirect: '/pages/users/login/smsCode'
        }],
        loginType: {
          BTN: 'btn',
          CODE: 'code',
          USER: 'user'
        }
      }
    }
  },

  onLoad() {
    this.activeName = this.enums.loginType.BTN
    this.baseList = [this.enums.menu[1], this.enums.menu[2]]
  },
  onReady() { },

  methods: {
    read() {
      this.readFlag = !this.readFlag
    },
    forgetPassword() {
      this.activeName = this.enums.loginType.BTN
      this.baseList = [this.enums.menu[1], this.enums.menu[2]]
    },
    handleJump(index) {
      const item = this.baseList[index]
      if (item.id === 1) {
        this.activeName = this.enums.loginType.BTN
        this.baseList = [this.enums.menu[1], this.enums.menu[2]]
      } else if (item.id === 2) {
        this.activeName = this.enums.loginType.USER
        this.baseList = [this.enums.menu[0], this.enums.menu[2]]
      } else if (item.id === 3) {
        this.activeName = this.enums.loginType.CODE
        this.baseList = [this.enums.menu[0], this.enums.menu[1]]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 30rpx);
  @include flex-space-between(column);

  .auth-header {
    width: 90%;
    .auth-logo {
      @include flex-center(column);
      padding: 60rpx 0;
    }

    .auth-box {
      .btn-group {
        margin-bottom: 20rpx;
        .authBtn {
          font-size: 32rpx;
        }
      }
      .tip-box {
        font-size: 24rpx;
        color: #888888;
        checkbox {
          transform: scale(0.7);
        }
        text {
          font-size: 24rpx;
          color: #ff0101;
        }
      }
    }
  }

  .auth-footer {
    color: #888888;
    width: 60%;
    .menu {
      .iconfont {
        font-size: 72rpx;
        color: var(--color);
      }
      .grid-text {
        padding-top: 20rpx;
      }
    }
  }
}
</style>
